<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="app">
	<header class="mui-bar mui-bar-nav in-bar">    
		<a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-left"></a>
  		<h1 class="mui-title" v-text="title"></h1>
  		<a href="javascript:window.location.href='search.htm'" id="searchIcon" class="mui-icon mui-icon-search mui-pull-right"></a>
	</header>

	<!-- 分类 -->
	<div class="channelBox fixChannel">
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted channel">
			<div class="mui-scroll">
				<a href="" class="mui-control-item mui-active">全部</a>	
				<a :href="'channel.htm?type='+vo.id+'&title='+vo.title" class="mui-control-item" v-for="vo in guanzhu">{{vo.title}}</a>	
			</div>					
		</div>
		<div class="dingyue">
			<a href="dingyue.htm">
    		<i class="mui-icon mui-icon-plusempty"></i> 
    		</a>
    	</div>
	</div>
    
    <!-- 底部tabBar -->
    <nav class="mui-bar mui-bar-tab">
	    <a href="index.htm" class="mui-tab-item">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a href="list.htm?t=NL&type=BN" class="mui-tab-item my-tab">
	        <span class="icon icon-yumi"></span>
	        <span class="mui-tab-label">能量类</span>
	    </a>
	    <a href="list.htm?t=DB&type=BD" class="mui-tab-item my-tab">
	        <span class="icon icon-danbaizhi"></span>
	        <span class="mui-tab-label">蛋白类</span>
	    </a>
	    <a href="list.htm?t=TJJ&type=BT" class="mui-tab-item my-tab">
	        <span class="icon icon-huaxueshiji"></span>
	        <span class="mui-tab-label">添加剂</span>
	    </a>
	    <a href="list.htm?t=YZ&type=BY" class="mui-tab-item my-tab">
	        <span class="icon icon-cunqianguan"></span>
	        <span class="mui-tab-label">养殖</span>
	    </a>
	    <a href="setting.htm" class="mui-tab-item my-tab">
	        <span class="icon icon-huiyuan"></span>
	        <span class="mui-tab-label">个人</span>
	    </a>
	</nav>

	<div class="mui-content" style="margin-top:41px">
        <!-- 主界面具体展示内容 -->
        <div id="loadding" class="loadding">
			<span class="mui-spinner"></span>
		</div>	
        <div class="box bg-white mb10" v-for="vo in list">
		    <div class="title">
		    	<h1 v-text="vo.title"></h1>
		    	<span><a :href="'channel.htm?type='+vo.id+'&title='+vo.title">更多</a></span>
		    </div>
		    
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-media my-media" v-for="f in vo.items">
		        	<a :href="'detail.htm?id='+f.id" style="margin: 0; white-space: normal;">
	                <img class="mui-media-object mui-pull-left" :src="f.imgurl">
	                <div class="mui-media-body">
	                	{{f.title}}
	                	<div style="padding: 5px 0">
	                    <p class="mui-pull-left">
	                    	<i class="icon icon-shijian"></i>
	                    	<span v-text="f.time"></span>
	                    </p>
	                    <p class="mui-pull-right">
	                    	<i class="icon icon-yanjing"></i>
	                    	<span v-text="f.num"></span>
	                    </p>
	                    </div>
	                </div>	
	                </a>			            
		        </li>	
		    </ul>
		</div>
    </div>
</div>


<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/loading.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" charset="utf-8">	
app.init();
var vm = new Vue({
	el:"#app",
	data:{
		title : 'VIP专栏',
		type:request.type,
		columns:[],
		list:[],
		guanzhu : []
	},
	created : function(){		
		that = this;
		that.goPage();//初始加载
		mui.showLoading('数据加载中');
		request = {
			command:1,
			udid:uuid,
			column:'VIPLM'
		};
		mui.get(api,request,function(res){	//关注列表			
			mui.hideLoading();			
			that.guanzhu = res.body.columns;			
		},'json');
	},
	methods: {
		goPage : function(){
			var that = this;
        	document.getElementById("loadding").className="loadding";  
			request = {
				command:13,
				udid:uuid	
			};
			mui.get(api,request,function(res){//文章列表
				document.getElementById("loadding").className="hide";
				that.list = res.body.columns;
				that.canScroll = 1;
			},'json');
		}
	},
	updated : function(){
		mui('.mui-scroll-wrapper').scroll();
	}
});

</script>
</body>
</html>